<template>
	<div class="page-content">
		<div class="page-title">请选择是否佩戴助听器
		<div class="page-timer"><Timer title="选择是否佩戴助听器"></Timer></div>
		</div>
		<div style="height: 823px;display: flex;justify-content: center;align-items: flex-start;" @mousedown="clickCarType">
			<button class="btns btn2" data-card="佩戴" @click="wear"></button>
			<button class="btns btn1" data-card="不佩戴"></button>
		</div>
		<el-dialog
		:visible.sync="dialogbt2"
		width="806px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
		top="30vh">
		<span slot="title" class="dialog-header" >
			<span style="line-height: 84px;margin-right: -50px;">请确定您已经佩戴了助听器</span>
			<Timer style="margin-top: 10px;"></Timer>
		</span>
			<div style="height: 271px;display: flex;justify-content: center;align-items: center;">
				<img src="../../../public/res/hearing/示意图.png" alt="">
			</div>
			<div style="height: 102px;background-color: #E7EEF4;border-radius: 0 0 20px 20px;display: flex;align-items: center;justify-content: center;border: 2px solid #AEB8C1">
				<button class="btn" style="width: 200px;height: 71px;margin-right: 40px;" @click="dialogbt2=false">返回</button>
				<button class="btn" style="width: 200px;height: 71px;margin-left: 40px;" @click="determine">确认</button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				carTypes: '',
				buttons:[],
				dialogbt2: false
			}
		},
		methods:{
			clickCarType(event){
				let btn = event.target;
				if(btn.tagName.toLowerCase() != 'button')
					btn = event.target.parentElement;
				
				if(btn.tagName.toLowerCase() != 'button')
					return;
				
				this.buttons.forEach((button)=>{
					button.classList.remove('active');
				})
				this.buttons.length = 0;
				btn.classList.add('active');
				this.buttons.push(btn);
				let num = btn.getAttribute('data-card');
				if(num){
					this.carTypes = num;
					console.log("选择: " + num);
				} 
			},
			wear(){
				this.dialogbt2 = true;
			},
			determine(){
				this.dialogbt2 = false;
			}
		}
	}
</script>

<style scoped="scoped">
	.btns{
		width: 250px; height: 330px;border-radius: 20px;margin-top: 160px;border: none;
	}
	.btn1{
		margin-left: 40px;
		background: url(../../../public/res/hearing/不佩戴.png)no-repeat center;
	}
	.btn1.active{
		margin-left: 40px;
		background: url(../../../public/res/hearing/不佩戴按下.png)no-repeat center;
	}
	.btn2{
		margin-right: 40px;
		background: url(../../../public/res/hearing/佩戴.png)no-repeat center;
	}
	.btn2.active{
		margin-right: 40px;
		background: url(../../../public/res/hearing/佩戴选中按下.png)no-repeat center;
	}
	.page-content>>>.el-dialog__header{
		width: 100%;
		margin: 0;padding: 0;
		height: 84px;background-color: #E7EEF4;
		display: flex;justify-content: center;align-items: center;
		border-radius: 20px 20px 0 0;
		font-size: 32px;color: #0060FF;font-weight: bold;
	}
	.page-content>>>.el-dialog__body{
		margin: 0;padding: 0;
	}
	.page-content>>>.el-dialog{
		border-radius: 20px;
	}
	.dialog-header{
		height: 100%;width: 100%;
	}
</style>
